import { Button, Card, Modal } from 'antd';

import { getDicByKey } from '@/support/common';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import DescriptionList from '../../../components/DescriptionList';
const { Description } = DescriptionList;

export default class SimCardDetailModal extends PureComponent {
  static contextTypes = {
    dicData: PropTypes.any,
  };
  render() {
    const { detailModelData, changeAddModalVisible } = this.props;

    return (
      <Modal
        title="详细信息"
        style={{ top: 20 }}
        width="700px"
        onCancel={() => changeAddModalVisible(false)}
        visible={true}
        footer={[
          <Button key="back" type="primary" onClick={() => changeAddModalVisible(false)}>
            返回
          </Button>,
        ]}
      >
        <div>
          <Card bordered={false} type="inner">
            <DescriptionList title="" col={2}>
              <Description term="IMSI" style={{ width: '50%' }}>
                {detailModelData.deviceId}
              </Description>
              <Description term="ICCID" style={{ width: '50%' }}>
                {detailModelData.iccid}
              </Description>
              <Description term="SIM卡号" style={{ width: '50%' }}>
                {detailModelData.msisdn}
              </Description>
              <Description term="运营商品牌" style={{ width: '50%' }}>
                {/* {detailModelData.carrierBrand} */}
                {getDicByKey(
                  this.context.dicData,
                  'carrierBrand',
                  detailModelData.carrierBrand || detailModelData.carrierBrand === 0
                    ? detailModelData.carrierBrand.toString()
                    : detailModelData.carrierBrand,
                )}
              </Description>
              <Description term="套餐类型" style={{ width: '50%' }}>
                {/* {detailModelData.simModel} */}
                {getDicByKey(this.context.dicData, 'simModel', detailModelData.simModel)}
              </Description>
              <Description term="联通套餐ID" style={{ width: '50%' }}>
                {detailModelData.unicomPkgId}
              </Description>
              <Description term="支付类型" style={{ width: '50%' }}>
                {/* {detailModelData.payType} */}
                {getDicByKey(this.context.dicData, 'payType', detailModelData.payType)}
              </Description>
              <Description term="采购商" style={{ width: '50%' }}>
                {/* {detailModelData.purchaser} */}
                {getDicByKey(this.context.dicData, 'purchaser', detailModelData.purchaser)}
              </Description>
              <Description term="激活状态" style={{ width: '50%' }}>
                {/* {detailModelData.simStatus} */}
                {getDicByKey(
                  this.context.dicData,
                  'simStatus',
                  detailModelData.simStatus || detailModelData.simStatus === 0
                    ? detailModelData.simStatus.toString()
                    : detailModelData.simStatus,
                )}
              </Description>
              <Description term="激活时间" style={{ width: '50%' }}>
                {detailModelData.activeTime}
              </Description>
              <Description term="生产日期" style={{ width: '50%' }}>
                {detailModelData.produceDate}
              </Description>
              <Description term="入库时间" style={{ width: '50%' }}>
                {detailModelData.createDate}
              </Description>
              <Description term="备注" style={{ width: '50%' }}>
                {detailModelData.remark}
              </Description>
            </DescriptionList>
          </Card>
        </div>
      </Modal>
    );
  }
}
